<!-- sku管理 - 综合表单页面 -->

<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">



    </ex_super_table_page>


    <ex_super_dialog_form ref="formDialog" v-bind="dialog" @afterSubmitSuccess="reload">
    </ex_super_dialog_form>
    <import_sku_map ref="import_sku_map" :thirdPartyList="thirdPartyList" />
    <el-dialog :title="$tt('tip_select_cancel_map')" :visible.sync="dialogCancelVisible">
      <div class="flex_row_center flex_justify_sb" v-for="(it, i) in dialogCancelList"
        :style="i == dialogCancelList.length - 1 ? '' : 'margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid gray;'">
        <div> {{ it.platformCode }}:{{ it.storeCode }}:{{ it.platformSkuCode }}</div>
        <el-button @click="e => cancelMap(it, i, dialogCancelList,)" type='text' class="button_text_danger">
          {{ $tt('label_cancel_map') }}
        </el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCancelVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import business_function from "@/common/business_function"

import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
import import_sku_map from './dialog/import_sku_map'
// import sku_select_card from './component/sku_select_card'

import emitOnFunction from '@/mixin/emit-on-function';

let emitKey = 'sku>sku_map'
export default {
  title: 'label_sku_map',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: { import_sku_map },
  data() {
    return {
      selection: [],
      option: {
        search: {
          model: [
            {
              label: "label_keyword", key: "keyword",
            },
            // {
            //   label: "label_platform_key", key: "platformCode", type: 'select', enum: 'SkuRefPlatformEnum',
            // }
          ],
        },
        action: [
          // {
          //   label: '添加映射', click: this.add
          // },

        ],
        actionExtra: [
          {
            label: 'label_batch_map', click: () => {
              this.$refs.import_sku_map.show()
            }
          },
          {
            label: 'label_export', click: this.exportExcel
          },
          // { label: 'label_download_excel_import_temp', click: this.downloadImportTemp },
        ],

        table: {
          url: "/mms-api/client/SkuPlatformRefClientRpc/selectSkuPlatformRef.json",
          model: this.init_table_model(),
        },
      },
      dialog: {
        customClass: 'dialog_auto',
        submitUrl: '/mms-api/client/SkuPlatformRefClientRpc/saveSkuPlatformRef.json',
        submitDataHandle: (data) => {
          data.isOverride = true
          return data
        },
        form: {
          itemClass: "form_item_mini", inputClass: "form_input_small",
          formClass: "form_mini_col2 flex_row_wrap",
          model: [
            { key: 'skuName', label: 'label_sku_name', formType: 'text' },
            { key: 'skuNameEn', label: 'label_sku_name_en', formType: 'text' },
            { key: 'skuBarcode', label: 'label_sku_code', formType: 'text' },
            { key: 'skuCode', label: 'label_sku_code_cn', formType: 'text' },
            { key: 'skuOnlyCode', label: 'label_sku_only_code', formType: 'text' },
            { key: 'platformCode', label: 'label_platform_key', type: 'select', enum: 'SkuRefPlatformEnum' },
            {
              key: 'storeCode', 
              label: (data, item) => {
                return data.platformCode === "ALIBABA_PO" ? this.$tt('label_platform_account') : this.$tt('label_platform_store')
              }, 

              render: (h, { data }) => (<ex_select_auto value={data.storeCode} onInput={e => this.$set(data, 'storeCode', e)}
                class="form_input_small"
                clearable={true}
                items={this.thirdPartyList.filter(it => it.platformCode == (data.platformCode == 'WB' ? 'WILDBERRIES' : data.platformCode))}
                option={{ 'label': "sellerId", 'value': 'sellerId' }}
              />),
            },
            { key: 'platformSkuCode', 
              if: (data) => data.platformCode !== "ALIBABA_PO",
              label: 'label_platform_product_code', 
              attrs: { maxlength: 50, 'show-word-limit': true },
            },
            { key: 'platformSkuCode', 
              itemClass: 'platformClass',
              if: (data) => data.platformCode === "ALIBABA_PO",
              render: (h, { data }) => {
                const obj = this.thirdPartyList.find(item => item.sellerId === data.storeCode) || {}
                return h( 'sku_select_card', {
                  props: {
                    value: data.platformSkuCode,
                    apiKeys: obj.apiKeys || ''
                  },
                  on: {
                    change: (e) => {
                      this.$set(data, 'platformSkuCode', e.specId)
                      this.$set(data, 'platformSkuName', e.skuName)
                      this.$set(data, 'platformProductCode', e.platformProductCode)
                      this.$set(data, 'apiKeys', obj.apiKeys)
                    },
                    getResData: (e) => {
                      this.$set(data, 'sellerLoginId', e.sellerLoginId)
                    }
                  }
                },)
              },
            },
          ],
          rules: {
            'platformSkuCode': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            'storeCode': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' },
              // {
              //   validator: (r, v, cb) => {
              //     !this.$reg.PureNumberLetter(v) ? cb(this.$tt('tip_only_input_number_char')) : cb()
              //   },
              // },
            ],
            'platformCode': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],

          },
        }
      },

      thirdPartyList: [],
      dialogCancelVisible: false,
      dialogCancelList: [],
    };
  },
  created() {
    this.$bus.$on('sku_map_manage/thirdPartyList', (list) => {
      this.thirdPartyList = list
    })
  },
  destroyed() {
    this.$bus.$off('sku_map_manage/thirdPartyList')
  },
  mounted() {
    this.refreshThirdPartyList()
  },
  methods: {
    refreshThirdPartyList() {
      this.$ajax({
        url: "/ums-api/client/ThirdPartyAuthorizedClientRpc/selectList.json",
        method: 'post',
        data: {},
        success: (res) => {
          this.thirdPartyList = res.data && res.data.rows ? res.data.rows : []
        },
      })
    },
    platform_store_Control({ data }) {
      return { 'netStop': !data.platformCode, 'focusInnerData': [], }
    },

    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, },

        {
          type: 'expandDesc', 'width': 80,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        { key: 'skuName', label: 'label_sku_name', 'min-width': 130, 'show-overflow-tooltip': true, },
        { key: 'skuNameEn', label: 'label_sku_name_en', 'width': 130, 'show-overflow-tooltip': true, },

        { key: 'skuBarcode', label: 'label_sku_code', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuCode', label: 'label_sku_code_cn', 'width': 120, 'show-overflow-tooltip': true, },

        { key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 120, 'show-overflow-tooltip': true, },
        {
          key: 'refMap', label: 'label_map_platform', 'min-width': 180,
          render: (h, { row }) => {
            console.log(row.refMap);
            const platformGroup = row.refMap ? _.groupBy(row.refMap, 'platformCode') : []
            let list = []
            const styleText = "margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid gray;"
            _.forOwn(platformGroup, (v, k) => {
              list.push(<el-popover
                trigger="hover">
                <el-tag slot="reference">{k}</el-tag>
                <div class="platform_list" style="max-width:300px;">
                  {
                    k === 'ALIBABA_PO' ? v.map((it, i) => (<div style={i == v.length - 1 ? "" : styleText} >
                        <div >{this.$tt('label_platform_store')} : {it.storeCode} </div>
                        <div>{this.$tt('label_platform_product_code')} : {it.platformSkuCode}</div>
                        <div>{this.$tt('label_product_id')} : {it.platformProductCode}</div>
                        <div>{this.$tt('label_sku_info')} : {it.platformSkuName}</div>
                        <a style="color: #2ea7e0;" href={`https://detail.1688.com/offer/${it.platformProductCode}.html`} target="_blnk">{this.$tt('label_sku_link')}</a>
                      </div>)) : 
                    v.map((it, i) => (<div style={i == v.length - 1 ? "" : styleText} >
                        <div >{this.$tt('label_platform_store')} : {it.storeCode} </div>
                        <div>{this.$tt('label_platform_product_code')} : {it.platformSkuCode}</div>
                      </div>))
                  }
                </div>
              </el-popover>)
            })
            if (_.isEmpty(list)) list = this.$tt('data_temp_none')
            return (<div>
              {list}
            </div>)
          }
        },

        // { key: 'platformSkuCode', label: '平台商品编码', 'width': 120, 'show-overflow-tooltip': true, },
        // { key: 'platformCode', label: '平台编码', 'width': 120, 'show-overflow-tooltip': true, },
        // {
        //   key: 'isOzonRef',
        //   label: '商品是否映射',
        //   'width': 100,
        //   formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum"),
        // },
        {
          type: 'operate', width: 160, operate: [
            {
              label: 'label_add_map',
              click: (row) => {
                this['$refs']['formDialog'].showNew({
                  title: this.$tt('label_sku_map'),
                  data: row,
                  onlySetData: true,
                })
              }
            },
            {
              label: 'label_cancel_map', class: "button_text_danger", if: (row) => row.refMap && row.refMap.length > 0,
              click: (row) => {
                this.cancelMapShow(row)

              }
            },
          ]
        }
      ]
    },
    cancelMap(row, i, list) {
      this.$ajax({
        url: "/mms-api/client/SkuPlatformRefClientRpc/delete.json",
        method: 'post',
        // type: 'json',
        loading: this.$tt('tip_submiting'),
        data: { skuId: row.skuId, storeCode: row.storeCode, platform: row.platformCode },
        success: (res) => {
          this.$message.success(this.$tt('tip_operate_success'))
          this.reload()
          list.splice(i, 1)
          if (_.isEmpty(list)) {
            this.dialogCancelVisible = false
          }
        },
      })
    },
    cancelMapShow(row) {
      if (row.refMap && row.refMap.length > 0) {
        this.dialogCancelVisible = true
        this.dialogCancelList = row.refMap
      }

    },
   
    exportExcel() {
      business_function.confirmOperateBaseSelectOrForm.call(this, {
        data: this.$refs.SuperTablePage.getSearchFormData(),
        model: this.option.search.model,
        selection: this.selection,
        callback: (selection, data) => {
          let params = {}
          if (!_.isEmpty(selection)) {
            params = {
              skuIdList: selection.map(it => it.skuId)
            }
          } else {
            params = data
          }
          this.$functionCommon({
            url: "/mms-api/client/SkuPlatformRefClientRpc/exportExcel.json",
            data: params, type: "form",
          })
        }
      })

    },
    downloadImportTemp() {
      if (this.$clickFast()) return
      this.$downloadFile({
        loading: true,
        url: "/mms-api/client/SkuPlatformRefClientRpc/downloadImportTemp.json"
      })

    },

  }
};

</script>
<style lang="less" scoped>
/deep/ .platformClass {
  width: 68rem;
  margin: 0 auto 18px;
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
